<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>common</title>
</head>
<body>
<nav th:fragment="top" class="navbar navbar-default navbar-fixed-top navbar-inverse">
    <div class="container">
        <!-- 当浏览器大小下于一定程度后的响应式图标-->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
            <!--设置商标-->
            <a class="navbar-brand" th:href="@{/index}">校园二手交易系统</a> </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div  class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div th:if="${#strings.isEmpty(session.user)}">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="login.html" th:href="@{/toLogin}">登陆</a></li>
                    <li><a href="regist.html" th:href="@{/toRegister}">注册</a></li>
                    <li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>
                </ul>
            </div>
            <div th:if="${not #strings.isEmpty(session.user)}" class="nav navbar-nav navbar-right">
                <div style="color:#f9f2f4;" class="nav navbar-left navbar-brand">
                    <p>用户名:[[${session.user.getUsername()}]]</p>
                </div>
                <div class="nav navbar-left navbar-brand">
                    <button class="btn btn-default btn-xs"><a th:href="@{/toAdmin}">个人中心</a></button>
                    <button class="btn btn-default btn-xs"><a th:href="@{/logout}">注销</a></button>
                </div>
            </div>
        </div>

        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

<div th:fragment="side">
    <!--data-toggle collapse 折叠  ul class =collapse 初始折叠 -->
    <div class="col-md-2 wow slideInDown" id="left">
        <div th:if="${session.user.getRole()=='管理员'}">
            <a href="#systemSetting"  data-toggle="collapse">
                <i class="glyphicon glyphicon-cog"></i>后台管理 <span class="pull-right glyphicon glyphicon-chevron-down"></span><br/> </a>
            <!--ul id  和 上面a 标签的id对应 所以能够弹出li -->
            <ul id="systemSetting" class="nav nav-pills nav-stacked collapse in" >
                <li ><a href="#" th:href="@{/user}"><i class="glyphicon glyphicon-user" ></i>用户管理</a></li>
                <li><a href="#" th:href="@{/getGoods}"><i class="glyphicon glyphicon-globe"></i>商品管理</a></li>
                <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>监控管理</a></li>
            </ul>
        </div>
        </br>
        <!--data-toggle collapse 折叠   collapse in 初始不折叠-->
        <div> <a href="#userSetting"  data-toggle="collapse">
            <i class="glyphicon glyphicon-fire"></i> 买家中心<span class="pull-right glyphicon glyphicon-chevron-down"></span> </a>
            <ul class="nav nav-pills nav-stacked collapse in" id="userSetting">
                <li> <a href="#publish" th:href="@{/shoppingCar(uid=${session.user.getId()})}" class="ex0 active"> <i class="glyphicon glyphicon-inbox"></i> 我的购物车</a> </li>
                <li> <a href="#" th:href="@{/getBought(uid=${session.user.getId()})}"> <i class="glyphicon glyphicon-gift"></i> 已买到的商品</a> </li>

            </ul>
        </div>
        </br>
        <!--data-toggle collapse 折叠   collapse in 初始不折叠-->
        <div>
            <a href="#sellSetting"  data-toggle="collapse">
                <i class="glyphicon glyphicon-asterisk"></i> 卖家中心
                <span class="pull-right glyphicon glyphicon-chevron-down"></span>
            </a>
            <ul class="nav nav-pills nav-stacked collapse in " id="sellSetting">
                <li> <a th:href="@{/publish}" class="ex0 active">
                    <i class="glyphicon glyphicon-pencil"></i> 发布商品 </a> </li>
                <li> <a th:href="@{/sellingGoods(uid=${session.user.getId()})}"> <i class="glyphicon glyphicon-barcode"></i> 出售中的商品</a> </li>
            </ul>
        </div>
    </div>
</div>

<div th:fragment="top2">
    <header class="wow fadeInRight">
        <img th:src="@{/images/two.jpg}" class="img-circle logo" alt="logo" />
        <div class="desc">校园二手交易系统</div>
    </header>
</div>
<div th:fragment="top3">
    <div class="jumbotron wow slideInDown ">
        <h1>校园二手交易</h1>
        <p>让闲置游起来</p>


        <div class="input-group col-sm-3">
            <form method="get" th:action="@{/findGoods}">
            <span class="input-group-btn " >
                <button class="btn btn-info" type="submit"> 搜 索 </button>
            </span>
                <input type="text" id="name" name="name" class="form-control" placeholder="Search for...">
            </form>
        </div>
    </div>
</div>
</body>
</html>